<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0,0,600,600);
ctx.beginPath();
ctx.arc(300,300,250,0,Math.PI/2);
ctx.arc(300,300,200,Math.PI/2,Math.PI);
ctx.arc(300,300,100,Math.PI,3*Math.PI/2);
ctx.arc(300,300,150,3*Math.PI/2,2*Math.PI);
ctx.closePath();
ctx.strokeStyle = 'rgba(255,165,0,1)';
ctx.stroke();
ctx.fillStyle = 'rgba(255,255,0,0.4)';
ctx.fill();
</script>
</body>
</html>